﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test UI drag and drop</title>

    <script src="jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".paragraph").draggable({ helper: 'clone' });
            $("#Text1").droppable(
            {
                accept: ".paragraph",
                drop: function(ev, ui) {
                    Text1.value = Text1.value + 'a';
                }

            });
        });
    </script>

    <style type="text/css">
        #Text1
        {
            height: 134px;
            width: 907px;
        }
    </style>
</head>
<body bgcolor="White">
    <div class="paragraph">
        <ul>
            <p>
                This is paragragh.
            </p>
        </ul>
    </div>
    <div style="height: 141px">
        <input id="Text1" type="text" />
    </div>
</body>
</html>
